import React, { useState, useEffect } from 'react'
import { Input, Select, Button, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setIsGroup, setStoreList, setTableCheck } from '../../../store/module/store'
import { updateGroup_all_ok, updateGroup_all_no } from '../../../request/api'

import Table1 from './Table1';
import Table2 from './Table2';
import Table3 from './Table3';
import './nucleus.css'



export default function nucleus() {
  const dispatch = useDispatch()
  let is_group = useSelector((state: any) => state.storeList.is_group) //数据判断刷新
  let state = useSelector((state: any) => state.storeList)

  const [name, setName] = useState<string>('')
  const [tel, setTel] = useState<string>('')
  const [pickup, setPickup] = useState<string>('')
  const [address, setAddress] = useState<string>('')
  const [type, setType] = useState<string>('')
  //下拉选择事件
  const handleChange = (value: string) => {
    setType(value)
  };

  //标签页组件
  const onChange = (key: string) => {
    console.log(key);
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '待审核',
      children: <Table1 />,
    },
    {
      key: '2',
      label: '已通过',
      children: <Table2 />,
    },
    {
      key: '3',
      label: '已作废',
      children: <Table3 />,
    },
  ];



  //批量通过
  const all_group_ok = async () => {
    let ids = state.tableCheck
    if (ids.length == 0) {
      alert('请选择数据')
    } else {
      let res = await updateGroup_all_ok({ ids, user: localStorage.getItem('user') })
      if (res.code == 200) {
        dispatch(setIsGroup())
      } else {
        alert('操作失败')
      }
    }
  }

  //批量作废
  const all_group_no = async () => {
    let ids = state.tableCheck
    if (ids.length == 0) {
      alert('请选择数据')
    } else {
      let res = await updateGroup_all_no({ ids, user: localStorage.getItem('user') })
      if (res.code == 200) {
        dispatch(setIsGroup())
      } else {
        alert('操作失败')
      }
    }
  }

  //检索
  const search = async () => {
      dispatch(setStoreList({ name, tel, pickup, address, type }))
      dispatch(setIsGroup())
  }
  //重置
  const reset = () => {
    setName('')
    setTel('')
    setPickup('')
    setAddress('')
    setType('')
    dispatch(setStoreList({}))
    dispatch(setIsGroup())

  }


  return (
    <div>
      <div className='all_top'>
        <div className='top'>
          <Input size="large" placeholder="请输入内容" prefix='姓名：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={name} onChange={(event) => {
              setName(event.target.value)
            }} />
          <Input size="large" placeholder="请输入内容" prefix='电话：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={tel} onChange={(event) => {
              setTel(event.target.value)
            }} />
          <Input size="large" placeholder="请输入内容" prefix='自提点名称：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={pickup} onChange={(event) => {
              setPickup(event.target.value)
            }} />
          <Input size="large" placeholder="请输入内容" prefix='地址：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={address} onChange={(event) => {
              setAddress(event.target.value)
            }} />
          <div style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }}>
            <span style={{ marginLeft: '0.13rem' }}>自提点类型：</span>
            <Select
              defaultValue="全部"
              style={{ width: '4rem', borderRadius: '0', fontSize: '0.22rem' }}
              onChange={handleChange}
              options={[
                { value: '全部', label: '全部' },
                { value: '便利店', label: '便利店' },
                { value: '快递驿站', label: '快递驿站' },
                { value: '杂货店', label: '杂货店' },
                { value: '水果/生鲜店', label: '水果/生鲜店' },
                { value: '其他', label: '其他' },
              ]}
            />
          </div>
        </div>
        <div className='top2'>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              search()
            }}
          >检索</Button>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              reset()
            }}
          >重置</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              all_group_ok()
            }}
          >批量通过</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              all_group_no()
            }}
          >批量作废</Button>
        </div>
      </div >
      <div className='box'>
        <div>
          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
        </div>
      </div>
    </div>
  )
}


